<template>
    <div class="search_box">
        <input class="search" type="text" placeholder="请输入项目名称并回车确认" @keyup.enter="keyupFn" v-model="title"/>
    </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref} from 'vue';

export default defineComponent({
  name: 'header',
   props: {
    addTodo: {
      type: Function,
      required: true,
    }
  },
  setup(props) {
    // 获取祖孙通讯过来的数据
    // const addTodo = inject('addTodo');
    let title = ref('');
    const keyupFn = () => {
      props.addTodo(title.value);
      title.value = '';
    }
    return {
      title,
      keyupFn,
    }
  }
});
</script>
<style scoped>
  .search_box {
    width: 90%;
    height: 40px;
    background-color: antiquewhite;
    border-radius: 10px;
    margin: 0 auto;
    margin-top: 10px;
  }
  .search {
    width: 90%;
    height: 100%;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 0 5%;
  }
</style>
